<%@ page pageEncoding="UTF-8" %>
<!DOCTYPE html>

<html lang="zh_CN">
<head>
	<title>VIDEO 测试</title>
	<meta charset="utf-8">
	<script src="js/jquery-1.6.min.js"></script>
</head>
<body>
	<article>
		<header>
			<h1>VIDEO EXTRACTOR</h1>
		</header>
		<section>
			<header>
				<hgroup>
					<h4>链接地址</h4>
				</hgroup>
			</header>
			<section>
				<input type="text" id="url" contenteditable="true" size="100" style="height: 35px;line-height: 35px;color:#3d9400;font-size:14px;"
						placeholder="支持优酷/土豆/酷6/六间房/56网/音悦台/搜狐/新浪/凤凰/奇艺的视频发布">
				<script>
					$(function() {
						$('#url').blur(function(e) {
							if (!$.trim($(this).val())) {
								return;
							}
							var url = '<%=request.getContextPath()%>/video/extract.action';
							var data = 'url=' + encodeURIComponent($(this).val());
							$.get(url, data, function(video) {
								if (!video) {
									$('#video-content').html('<h1>不支持该地址</h1>');
									return;
								}
								var html = '<article>';
								html += '<h1>' + video.title + '</h1>';
								html += '<dl>';
								html += '<dt>时长</dt><dd>' + video.time + '</dd>';
								html += '<dt>缩略图</dt><dd><img src="' + video.thumbnail + '" alt="' + video.title + '"></dd>';
								html += '<dt>描述</dt><dd>' + video.summary + '</dd>';
								html += '<dt>来源网站</dt><dd>' + video.source + '</dd>';
								html += '<dt>来源地址</dt><dd>' + video.pageUrl + '</dd>';
								html += '<dt>Flash地址</dt><dd>' + video.flashUrl + '</dd>';
								html += '<dt>视频</dt><dd>' + video.embedHtmlCode + '</dd>';
								html += '</dl>';
								html += '</article>';
								$('#video-content').html(html);
							});
						});
					});
				</script>
			</section>
			<section id="video-content">
			</section>
		</section>
	</article>
</body>
</html>
